<template>
  <div>
    <!-- 作业1 -->
    <div class="shop">
      <h4>欢迎光临简单水果店</h4>
      <div class="main">
        <div><p>苹果10¥/斤,折扣&lt;8折&gt;</p></div>
        <div>
          <div class="sl">
            请输入你要购买的斤数
            <input type="number" v-model.number="item" />
          </div>
        </div>
        <div><button @click="account">结账买单</button></div>
        <div>
          结账单:总价:{{ price }}¥ 折后价:{{ newprice }}¥ 省了{{
            price - newprice
          }}¥
        </div>
      </div>
    </div>
    <hr />
    <!-- 作业1 -->
    <!-- —————————————————————————————————————————————————————————————————————————————— -->
    <!-- 作业2 -->
    <div style="width: 400px; margin: 0 auto">
      <h2>选择你喜欢的专栏</h2>
      <span v-for="(item, index) in hobby" :key="index">
        <input
          type="checkbox"
          name=""
          :id="index"
          @change="checked(item, index)"
        /><label :for="index">{{ item }}</label>
      </span>
      <ul>
        <li v-for="(item, index) in arr" :key="index">{{ item.item }}</li>
      </ul>
    </div>
    <hr />
    <!-- 作业2 -->
    <!-- ——————————————————————————————————————————————————————————————————————————————— -->
    <!-- 附加练习 -->
    <div style="width: 400px; margin: 0 auto">
      <p>附加练习1</p>
      <ul>
        <li v-for="(item, index) in arr1" :key="index">{{ item }}</li>
      </ul>
      <button type="button" @click="change">点击</button>
    </div>
    <hr />
    <!-- ———————————————————————————————————— -->
    <div style="width: 400px; margin: 0 auto">
      <p>附加练习2</p>
      <ul>
        <li v-for="(item, index) in arr2" :key="index">
          <span>{{ item }}</span>
          <button @click="del(index)">删除</button>
        </li>
      </ul>
      <button @click="add">生成</button>
    </div>
    <hr />
    <!-- ———————————————————————————————————— -->
    <div class="list">
      <p>附加练习3</p>
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <!-- 循环渲染的元素tr -->
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.time }}</td>
          <td>
            <button @click="remove(item.id)">删除</button>
          </td>
        </tr>
        <!-- 没有数据显示 -->
        <tr v-if="list.length === 0">
          <td colspan="4">没有数据咯~</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: 0,
      price: 0,
      newprice: 0,
      hobby: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      arr: [],
      arr1: ["苹果", "香蕉", "芒果", "火龙果"],
      arr2: [5, 7, 1, 4],
      list: [
        { id: 1, name: "奔驰", time: "2020-08-01" },
        { id: 2, name: "宝马", time: "2020-08-02" },
        { id: 3, name: "奥迪", time: "2020-08-03" },
      ],
    };
  },
  methods: {
    account() {
      if (this.item < 0) return;
      this.price = this.item * 10;
      this.newprice = this.price * 0.8;
    },
    checked(item, id) {
      const flage = this.arr.findIndex((item) => item.id === id);
      flage === -1 ? this.arr.push({ id, item }) : this.arr.splice(flage, 1);
    },
    change() {
      this.arr1.push(this.arr1[0]);
      this.arr1.shift(0, 1);
    },
    add() {
      this.arr2.push(Math.floor(Math.random() * 21) + 1);
    },
    del(id) {
      this.arr2.splice(id, 1);
    },
    remove(id) {
      const index = this.list.findIndex((item) => item.id === id);
      index !== -1 && this.list.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="less">
.shop {
  text-align: center;
  margin: 0 auto;
  h4 {
    font-weight: 400;
  }
  .main {
    padding: 5px;
    .sl {
      span {
        cursor: pointer;
      }
    }
  }
}
.list {
  width: 600px;
  margin: 20px auto;
  .tb {
    border-collapse: collapse;
    width: 100%;
    th {
      background-color: #0094ff;
      color: white;
    }
    th,
    td {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }
  }
}
</style>
